<template>
  <el-form v-loading="loading" ref="followForm" :model="followForm" :rules="followRules" label-width="120px">
    <el-form-item label="客户需求" prop="requirement">
      <el-input 
      v-model="followForm.requirement" 
      type="textarea"
      :rows="4"
      maxlength="255"
      show-word-limit
      placeholder="客户有什么需求？" />
    </el-form-item>

    <el-divider></el-divider>
    
    <el-form-item label="客户意向" prop="intention">
      <el-select v-model="followForm.intention">
        <el-option v-for="o in intentions" :label="o.label" :value="o.value" :key="o.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="下次回访时间" prop="nextFollowTime">
      <el-date-picker v-model="followForm.nextFollowTime" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期时间" :picker-options="pickerOptions"/>
    </el-form-item>
    <el-form-item label="跟进进度" prop="status">
      <el-select v-model="followForm.status">
        <el-option v-for="o in followStatus" :label="o.label" :value="o.value" :key="o.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="跟进备注" prop="remark">
      <el-input v-model="followForm.remark" type="textarea" placeholder="本次跟进内容" 
      :rows="3" maxlength="255" show-word-limit/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { updateOpportunity, getOpportunity } from '@/api/customer'

export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['id', 'customerName', 'operators', 'opportunityId'],
  data() {
    return {
      loading: false,
      followForm: {
        merchantCustomerId: this.id,
        merchantCustomerName: this.customerName,
        opportunityId: this.opportunityId,
        intention: 1,
        status: '已录入',
        requirement: '',
        remark: '',
        nextFollowTime: ''
      },
      followRules: {
        requirement: [{ required: true, message: '请输入客户需求', trigger: 'blur'}],
        intention: [{ required: true, message: '请选择客户意向', trigger: 'blur' }],
        status: [{ required: true, message: '请选择跟进进度', trigger: 'blur'}],
        nextFollowTime: [{ required: true, message: '跟进时间不能为空', trigger: 'blur' }],
        remark: [{ required: true, message: '请填写跟进记录', trigger: 'blur'}]
      },
      intentions: this.$store.getters.intentions,
      followStatus: this.$store.getters.followStatusArray,
      pickerOptions: {
        shortcuts: [{
          text: '明天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '后天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 7200 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周后',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      }
    }
  },
  mounted() {
    if (this.opportunityId) {
      this.loading = true
      getOpportunity(this.opportunityId).then(res => {
        this.loading = false
        const data = res.data
        this.followForm.merchantCustomerName = this.customerName
        this.followForm.requirement = data.requirement
        // this.followForm.remark = data.remark
        // this.followForm.nextFollowTime = data.nextFollowTime
        this.followForm.intention = data.intention
      })
    }
  },
  methods: {
    submitForm() {
      this.$refs.followForm.validate(valid => {
        if (valid) {
          this.loading = true
          console.log('新建跟进机会')
          updateOpportunity(this.followForm).then(() => {
            this.$message('跟进客户成功')
            this.$emit('success')
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
